<template>
  <div>
    <el-table :data="list" border fit highlight-current-row style="width: 100%" v-loading="loading">
      <el-table-column align="center" label="活动ID" width="160" element-loading-text="请给我点时间！">
        <template slot-scope="scope">
          <span>{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column width="185px" align="center" label="活动名称">
        <template slot-scope="scope">
          <span>{{ scope.row.promName}}</span>
        </template>
      </el-table-column>

      <el-table-column width="100px" align="center" label="活动类型">
        <template slot-scope="scope">
          <span>{{genFrontPromType(scope.row.frontPromType)}}</span>
        </template>
      </el-table-column>

      <el-table-column align="center" label="活动渠道">
        <template slot-scope="scope">
          <span>{{genChannelCode(scope.row.channelCodes)}}</span>
        </template>
      </el-table-column>

      <el-table-column width="340px" align="center" label="活动时间">
        <template slot-scope="scope">
          <span>{{ scope.row.startTime }} - {{ scope.row.endTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="创建人" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.creatorName }}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="center" label="状态" width="110">
        <template slot-scope="scope">
          <!--          活动状态 0初始化 1 待提交  2 待审核  3未开始 4 审核不通过  5 进行中  6 已过期  7 已关闭-->
          <span v-if="scope.row.status == 9">草稿状态</span>
          <span v-else-if="scope.row.status == 1">待提交</span>
          <span v-else-if="scope.row.status == 2">待审核</span>
          <span v-else-if="scope.row.status == 3">未开始</span>
          <span v-else-if="scope.row.status == 4">审核不通过</span>
          <span v-else-if="scope.row.status == 5">进行中</span>
          <span v-else-if="scope.row.status == 6">已过期</span>
          <span v-else-if="scope.row.status == 7">已关闭</span>
          <span v-else-if="scope.row.status == 8">已结束</span>
          <span v-else>未知状态{{scope.row.status}}</span>
        </template>
      </el-table-column>

      <el-table-column class-name="status-col" align="center" label="创建时间" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="实际参与人数" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.numOfparticipants }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="实际投入成本" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.inputCost }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="实际营销额" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.marketingAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="实际核销数" width="170">
        <template slot-scope="scope">
          <span>{{ scope.row.writeOff}}</span>
        </template>
      </el-table-column>
      <el-table-column class-name="status-col" align="center" label="操作" width="290">
        <template slot-scope="scope">
          <span v-if="[5].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</kt-button>
            <kt-button type="text" class="textButton" @click="copyBtnShow(scope.row.id)" perms="market:gift:copy" label="复制"></kt-button>
            <kt-button
              type="text"
              class="textButton"
              @click="updatePromotionStatus(scope.row.id, 7)"
            >关闭</kt-button>
            <kt-button type="text" class="textButton" @click="appendMerchantProduct(scope.row)">追加商品</kt-button>
            <kt-button type="text" class="textButton" @click="viewMarketingReport(scope.row)" perms="market:gift:report" label="查看营销报告"></kt-button>
          </span>
          <span v-else-if="[6,7].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</kt-button>
            <kt-button type="text" class="textButton" @click="copyBtnShow(scope.row.id)" perms="market:gift:copy" label="复制"></kt-button>
            <kt-button type="text" class="textButton" @click="viewMarketingReport(scope.row)" perms="market:gift:report" label="查看营销报告"></kt-button>
          </span>
          <span v-else-if="[8].includes(scope.row.status)">
            <el-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</el-button>
            <kt-button type="text" class="textButton" @click="copyBtnShow(scope.row.id)" perms="market:gift:copy" label="复制"></kt-button>
          </span>
          <span v-else-if="[0,1,2,3,4,5].includes(scope.row.status)">
            <kt-button type="text" class="textButton" @click="seeNewTab(scope.row)">查看</kt-button>
            <kt-button type="text" class="textButton" @click="copyBtnShow(scope.row.id)" perms="market:gift:copy" label="复制"></kt-button>
            <kt-button type="text" class="textButton" @click="updateBtnShow(scope.row)" perms="market:gift:edit" label="编辑"></kt-button>
            <kt-button type="text" class="textButton" @click="deleteActivity(scope.row.id)" perms="market:gift:delete" label="删除"></kt-button>
            <kt-button type="text" class="textButton" @click="viewAnalysi()">查看分析</kt-button>
            <kt-button type="text" class="textButton" @click="SecondSell()">二次营销</kt-button>
          </span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页栏-->
    <div class="toolbar" style="padding:10px;">
      <el-pagination
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="refreshPageRequest"
        :current-page="listQuery.pageNo"
        :page-size="listQuery.pageSize"
        :total="totalSize"
        style="float:right;"
        :page-sizes="[10, 20, 30, 40]"
        @size-change="handleSizeChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
import {
  promTypeConverter,
  frontPromTypeConverter,
  channelCodeConverter
} from "@/market/dict/marketDict";

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    }
  },
  props: {
    type: {
      type: String,
      default: "0"
    },
    parentFilters: {
      type: Object
    }
  },
  data() {
    return {
      list: [],
      tableList: {
      },

      listQuery: {
        pageNo: 1,
        pageSize: 10,
        status: this.type,
        sort: "+id"
      },
      loading: false,
      totalSize: 0
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.loading = true;
      this.$emit("create"); // for test
      let _filters = JSON.parse(JSON.stringify(this.parentFilters));

      _filters["pageNo"] = this.listQuery.pageNo;
      _filters["pageSize"] = this.listQuery.pageSize;
      _filters["status"] = this.listQuery.status;
      if (_filters.status == "0") {
        _filters.status = "";
      }
      let this_ = this;
      this.utils.request.promotionList(_filters, function(res) {
        if (res.code == "0000") {
          this_.list = res.data.list;
          this_.totalSize = res.data.totalCount;
        } else {
          //请求失败，展示mock数据
          var key = "status" + this_.listQuery.status;
          //this_.list = this_.tableList[key];
        }
        this_.loading = false;
      });

      // })
    },
    //查看
    seeNewTab: function(val) {
      //this.$router.push("/QueryPromotion");
      this.$router.push(`/QueryPromotion?value=${val.id}&auth=0`);
    },
    //复制
    copyBtnShow: function(id) {
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });
      let this_ = this;
      let param = { id: id };
      this.utils.request.promotionCopyById(param, function(res) {
        if (res.code == "0000") {
          this_.getList();
          loading.close();
        }
      });
    },
    //关闭
    closeActivity: function() {
      this.$confirm("是否确认关闭活动？", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$message({ message: "活动已关闭 ", type: "success" });
        })
        .catch(() => {});
    },
    //关闭或者删除
    updatePromotionStatus: function(id, status) {
      let this_ = this;
      let params = { id: id, status: status };
      this.utils.request.promotionList(params, function(res) {
        if (res.code == "0000") {
          this_.getList();
        } else {
          alert("更新失败");
        }
      });
    },
    //删除
    deleteActivity: function(id) {
      let this_ = this;
      let params = { id: id };
      this.utils.request.promotionDelete(params, function(res) {
        if (res.code == "0000") {
          this_.getList();
        } else {
          alert("更新失败");
        }
      });
    },
    updateBtnShow: function(val) {
      this.$router.push(`/SeckillPromotionEvent?value=${val.id}&auth=0`);
    },
    //追加商品
    appendMerchantProduct: function(val) {
      this.$router.push(`/SeckillPromotionEvent?value=${val.id}&auth=0&active=3`);
    },
    //查看营销报告
    viewMarketingReport: function() {
      this.$router.push("/MarketingReport");
    },
    // 换页刷新-pageNo
    refreshPageRequest: function(pageNum) {
      this.listQuery.pageNo = pageNum;
      this.getList();
    },
    // 换页刷新-pageSize
    handleSizeChange: function(pageSize) {
      this.listQuery.pageSize = pageSize;
      this.listQuery.pageNo = 1;
      this.getList();
    },
    genFrontPromType: function(type) {
      return frontPromTypeConverter(type);
    },
    genChannelCode: function(code) {
      return channelCodeConverter(code);
    },
    //查看分析
    viewAnalysi() {
      this.$router.push('/SecKillPromotionDetail')
      // console.log(123);
    },
    //二次营销
    SecondSell() {
      // console.log(456);
      this.$emit('SecondSell')
    }
  }
};
</script>
<style scoped>
.textButton {
  margin-left: 1px;
}
</style>

